<template>
    <div>

       <!-- <el-button plain @click="dialogVisible_ZhiFu = true">
            点击出现模态框       
        </el-button> -->

        <el-dialog
            v-model="dialogVisible_ZhiFu"
            title="支付"     
            class="el-dialog_zhifu"   
            :before-close="handleClose">
            <template #footer>
                <el-container>
                    <!-- 左侧内容 -->
                    <div class="left">
                        <div class="person_message">客户信息</div>
                        <div class="person_message_div1">
                            <div class="zhuoci">{{ (user_info as any).Table_times}}</div>
                            <div class="NB">
                                <div class="name">{{ (user_info as any).name }}</div> 
                                <div class="bianhao">#{{ (user_info as any).num }}&nbsp;/&nbsp;用餐</div>
                            </div>
                        </div>
                  
                        <div    class="div_jiaoyi"> 
                            <div ref="container" class="jioayi_content" 
                            v-infinite-scroll="load"
                            :infinite-scroll-disabled="disabled">
                         
                                <div class="jiaoyi_title">交易明细</div>
                        
                                <div class="jiaoyi_item" v-for="item in list.slice(0,count)" :key="(item as any)._id">
                                    <div class="DuiQi">
                                        <div class="cai_name">{{(item as any).name}}</div>
                                        <div class="cai_num">×{{(item as any).num}}</div>                   
                                    </div>
                                    <div class="cai_price">￥{{(item as any).price}}</div>     
                                </div>
                                    <p class="loading" v-if="loading" v-loading="loading1"  ></p>
                                    <p class="noMore" v-if="noMore">没有更多了</p>
                            </div>
                    
                                <div class="jiaoyi_foot">
                                    <div class="DuiQi">
                                        <div class="xiaoji">小计</div>
                                        <div class="xiaoji_price">￥48.34</div>
                                    </div> 
                                    <div class="DuiQi" style="margin-top: 25px">
                                        <div class="shui_lv">税率(5%)</div>
                                        <div class="shui_lv_price">￥2.47</div>
                                    </div>
                                
                                    <div class="DuiQi" style="margin-top: 30px">
                                        <div class="Shi_Fu">实付</div>
                                        <div class="Shi_Fu_price">￥51.81</div>
                                    </div>
                                </div>
                     
                            
                            
                        </div>
                        
                    </div>

                
                    <!-- 右侧内容 -->
                    <div class="right">
                        <div class="fukuan_way">选择付款方式</div>        
                            <el-select                                              
                                v-model="value"
                                placeholder="请选择支付方式">      
                                    <el-option class="option" label="现金" value="1">  
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-jinqian1"></use>
                                        </svg>
                                        现金
                                    </el-option> 
                                    <el-option  class="option" label="银行卡" value="2">  
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-xinyongkayinhangka"></use>
                                        </svg>
                                        银行卡
                                    </el-option> 
                                    <el-option class="option" label="微信" value="3">  
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-weixin"></use>
                                        </svg>
                                        微信
                                    </el-option> 
                                    <el-option class="option"  label="支付宝" value="4">  
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-zhifubaozhifu"></use>
                                        </svg>
                                        支付宝
                                    </el-option> 
                               
                              
                            </el-select>    
                        <div>
                            <Calculator/>
                        </div>
                             
                    </div>
                </el-container>
            </template>
        </el-dialog>
        <div>
            <Homeheader></Homeheader>
        </div>
        

        <div class="view">
            <RouterView></RouterView>
        </div>
       
       
        <div>
            <Homefooter></Homefooter>
        </div>

        

     </div>
      
   </template>
   
   <script name="Person666" setup lang="ts">
   
   import { ref,onMounted,computed,watchEffect } from 'vue';
   import axios from 'axios';
   import Calculator from './Calculator.vue'
   import {useRouter} from 'vue-router'
   import Homeheader from '@/views/pages/Homeheader.vue';
   import Homefooter from '@/views/pages/Homefooter.vue';
   import { RouterView } from 'vue-router';


   onMounted( ()=>{
       getlist()
      
   })
   const router=useRouter()

   const value = ref('')
   const dialogVisible_ZhiFu = ref(false)
   const dialogVisible_JieSuan= ref(false)

    let list=ref([])//后端获取用户点菜的数据
    let user_info=ref([])//后端获取用户信息
    let count=ref(4)//前端显示的数据数量
    const loading = ref(false)
    const loading1 = ref(true)
    const noMore = computed(() => count.value >= 10) //判断是否加载完毕
    const disabled = computed(() => loading.value || noMore.value)
    const load = () => {
    loading.value = true //加载2s后显示
    setTimeout(() => {
        count.value += 4 //每次加载的数量
        loading.value = false //加载2s前消失
    }, 3000)
    }

   const handleClose =()=>{
    dialogVisible_ZhiFu.value=false
   }
 
   async function getlist(){
       let {data}=await axios.get('http://localhost:3000/list')
       console.log(data);
       
       user_info.value=data.list[0]
       list.value=data.list[0].user_list
     
       
   }

   watchEffect( () => {
    console.log('list',list.value.length);
    console.log('count的数量',count.value);
    console.log('noMored的状态',noMore.value);
  })

  const index=ref(0)

  //跳转餐厅区域
  function TZ_1(){
    router.push('/seat/content1')
    index.value=0
  }
  function TZ_2(){
    router.push('/seat/content2')
    index.value=1
  }
  //跳回订单页面
  function TZ_Dingdan(){
    
  }

   </script>
   <style lang="less" scoped>
        .view{
            background: #eee;
            padding-top: 12vh;
            padding-bottom: 5vh;
            box-sizing: border-box;
           
        }
        .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        color: #3984D8;
        }
        .loading{
            margin-top: 50px
        }
        .noMore{
            text-align: center;
        }
        .jioayi_content::-webkit-scrollbar {
            display: none; /* 隐藏滚动条 */
        }

       .left{
        width: 52%;
        // border: 1px solid red;
        // padding-top: 30px;
        padding-left: 60px;
           .title{
               font-size: 40px;
               font-weight: bold; 
            //    border: 1px solid red;
               text-align: left;
           }
           .person_message{
               
               font-size: 30px;
               font-weight: bold; 
            //    border: 1px solid red;
               text-align: left;
           }
           .person_message_div1{
               width: 280px;
               height: 100px;
               display: flex;
            //    border: 1px solid #000;
               margin-top: 20px;
               .zhuoci{
                   width: 100px;
                   height: 100px;
                   background-color: #F0F8FF;
                   color: #3984D8;
                   line-height: 100px;
                   text-align: center;
                   font-size: 25px;
               }
               .NB{
                   height: 100px;
                //    border: 1px solid red;
                   font-size: 25px;
                   .name{ 
                       padding-left: 20px;
                       margin-top: 8px;
                    //    border: 1px solid #000;
                       text-align: left
                       }
                   .bianhao{
                       padding-left: 20px;
                    //    border: 1px solid #000;
                    
                   }
                   } 
           }
           .div_jiaoyi{
               width: 600px;
               margin-top: 30px;
               border: 1px solid #F5F5F5;
               background-color: #F5F5F5;
               border-radius: 20px;
               padding-top: 10px;
               padding-left: 10px;
               padding-right: 10px;
               padding-bottom: 30px;
               .jioayi_content{
                overflow:scroll;
                height: 460px;
                width: 100%;
                    // border: 1px solid red;
                        .jiaoyi_title{                
                            background-color: #F5F5F5;
                            font-size: 30px;
                            text-align: left;
                            // margin-top: 10px;
                            margin-left: 20px;
                            position: sticky;
                            top:0px;
                            z-index:999;
                            // border: 1px solid red;
                        }
                        .jiaoyi_item{
                            //    border: 1px solid #000;
                            margin-left: 20px;
                            margin-right: 20px;
                            margin-top: 25px;
                            .cai_name{
                                font-size: 20px;
                            }
                            .cai_num{
                                font-size: 20px;
                            }
                            .cai_price{
                                font-size: 18px;
                                font-weight: bold;
                                margin-top: 10px;
                                text-align: left;
                            }
                            
            
                    }

                }
                
                
                .jiaoyi_foot{
                    //    border: 1px solid #000;
                    padding-left: 20px;
                    padding-right: 20px;   
                    margin-top: 20px;             
                    .xiaoji{
                        font-size: 18px;  
                    }
                    .xiaoji_price{
                        font-size: 18px;  
                    }
                    .shui_lv{
                        font-size: 18px;  
                    }
                    .shui_lv_price{
                        font-size: 18px;  
                    }
                    .Shi_Fu{
                        font-size: 30px;
                    }
                    .Shi_Fu_price{
                        font-size: 30px;
                    }
    
                }      

   
           }
        }
        //两端对齐
        .DuiQi{
            display: flex;
            justify-content: space-between;
        }
        
        .right{       
            width: 48%;
            padding-right: 60px;
            padding-left: 20px;
            // border: 1px solid aqua;
            .fukuan_way{
                // border: 1px solid red;
                font-size: 25px;
                margin-top: 10px;
                margin-left: 30px; 
                text-align: left;    
            }
           
        }
        //select
        :deep(.el-select__wrapper){
            width: 500px;
            height: 80px;
            border: 1px solid #1677ff;
            border-radius: 15px;
            font-size: 22px; 
        }  
        .option{
            width: 500px;
            font-size: 26px;
            height: 50px;
           
        }
        .el-select{
            --el-select-width:70%;
            margin-top: 20px;
            margin-right: 140px;
            
        }    
        //整体的模态框
        :deep(.el-dialog){
            width: 1336px;
            height: 1024px;
            margin-top: 0px;
            margin-bottom: 0px;
            box-sizing: border-box;
            padding: 0px;

        }
        //模态框header部分
        :deep(.el-dialog__header){
           font-weight: bold;
           font-size: 30px;
           padding-top: 40px
        }
        //模态框title部分(支付)
        :deep(.el-dialog__title){
            font-weight: bold;
            font-size: 40px;
            margin-left: 60px;
            padding-top: 20px
        }
        //模态框右上角的X
        :deep(.el-dialog__headerbtn){
            font-weight: bolder;
            font-size: 40px;
            padding-top: 40px;
            padding-right: 100px
            
        }
       

 
        
        



       
       
       
       
        
   
   </style>